<template>
    <div id="box">
        <div class="box-second">
            <div class="myBoxTwo">
                <div class="title-bar animate__animated animate__fadeInUp">成果转化总体概览</div>
                <div class="box-content animate__animated animate__fadeInUp">
                    <div class="topTotal">
                        <div class="topTotal-item">
                            <div class="numberBox">
                                <div v-for="(item, index) in [2, 0, 6, 2]" class="number" style="color: #00EEFD;">
                                    <CountTo v-if="item != '.'"  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                    <span v-else>.</span>
                                </div>
                            </div>
                            <div class="topTotal-item-title">登记总数量</div>
                        </div>
                    </div>
                    <div style="height: calc(100% - 7rem);">
                        <piBar v-if="linexDataOther.length > 0" :xData="linexDataOther" :sData="linesDataOther"></piBar>
                    </div>
                </div>
            </div>
            <div class="myBoxTwo" style="width: calc((100% - 0.5rem) / 4 * 3)">
                <div class="title-bar title-barOther animate__animated animate__fadeInUp">
                    <div>全区技术合同登记统计</div>
                </div>
                <div class="box-content animate__animated animate__fadeInUp" style="height: calc(100% - 45px);">
                    <div class="newContent">
                        <div class="newContent-left">
                            <div :class="currentIndex == 1 ? 'newContent-left-item item-active' : 'newContent-left-item'" @click="changeTab(1)">
                                <div class="newContent-left-item-img">
                                    <img v-if="currentIndex == 1" src="@/assets/bigScreen/chengguo-icon1-active.png" alt="" />
                                    <img v-else src="@/assets/bigScreen/chengguo-icon1.png" alt="" />
                                </div>
                                <div class="newContent-left-item-text">登记项数</div>
                            </div>
                            <div :class="currentIndex == 2 ? 'newContent-left-item item-active' : 'newContent-left-item'" @click="changeTab(2)">
                                <div class="newContent-left-item-img">
                                    <img v-if="currentIndex == 2" src="@/assets/bigScreen/chengguo-icon2-active.png" alt="" />
                                    <img v-else src="@/assets/bigScreen/chengguo-icon2.png" alt="" />
                                </div>
                                <div class="newContent-left-item-text">合同成交额</div>
                            </div>
                            <div :class="currentIndex == 3 ? 'newContent-left-item item-active' : 'newContent-left-item'" @click="changeTab(3)">
                                <div class="newContent-left-item-img">
                                    <img v-if="currentIndex == 3" src="@/assets/bigScreen/chengguo-icon3-active.png" alt="" />
                                    <img v-else src="@/assets/bigScreen/chengguo-icon3.png" alt="" />
                                </div>
                                <div class="newContent-left-item-text">技术交易额</div>
                            </div>
                        </div>
                        <div class="newContent-right">
                            <div class="newContent-right-item">
                                <div class="right-item-title">
                                    <div class="title-line"></div>
                                    <div class="title-text">18-23年技术合同登记统计</div>
                                </div>
                                <div class="topTotal">
                                    <div class="topTotal-item">
                                        <div class="numberBox">
                                            <div v-for="(item, index) in totalOne" class="number" style="color: #00EEFD;">
                                                <CountTo v-if="item != '.'"  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                                <span v-else>.</span>
                                            </div>
                                        </div>
                                        <div class="topTotal-item-title">登记总数量</div>
                                    </div>
                                </div>
                                <div style="height: calc(100% - 10rem);">
                                    <piBarTwo :key="currentIndex" :xData="xDataAllOne" :data="AllDataOne"></piBarTwo>
                                </div>
                            </div>
                            <div class="newContent-right-item" style="border-left: 1px solid #102956;border-right: 1px solid #102956;">
                                <div class="right-item-title">
                                    <div class="title-line"></div>
                                    <div class="title-text">2022年与2023年数据对比</div>
                                </div>
                                <div class="topTotal">
                                    <div class="topTotal-item">
                                        <div class="numberBox">
                                            <div v-for="(item, index) in totalTwo" class="number" style="color: #00EEFD;">
                                                <CountTo v-if="item != '.'" :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                                <span v-else>.</span>
                                            </div>
                                        </div>
                                        <div class="topTotal-item-title">登记总数量</div>
                                    </div>
                                </div>
                                <div style="height: calc(100% - 10rem);">
                                    <outcomeLevel :key="currentIndex" style="padding: 10px;" :data1="dataOne" :data2="dataTow" :data3="dataThree"></outcomeLevel>
                                </div>
                            </div>
                            <div class="newContent-right-item">
                                <div class="right-item-title">
                                    <div class="title-line"></div>
                                    <div class="title-text">2023技术合同登记盟市分布</div>
                                </div>
                                <div class="topTotal">
                                    <div class="topTotal-item">
                                        <div class="numberBox">
                                            <div v-for="(item, index) in totalThree" class="number" style="color: #00EEFD;">
                                                <CountTo v-if="item != '.'" :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                                <span v-else>.</span>
                                            </div>
                                        </div>
                                        <div class="topTotal-item-title">登记总数量</div>
                                    </div>
                                </div>
                                <div style="height: calc(100% - 10rem);">
                                    <piBarTwoOther :key="currentIndex" :xData="xDataAllTwo" :data="AllDataTwo"></piBarTwoOther>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="myBoxTwo">
                <div class="title-bar animate__animated animate__fadeInUp">
                    <div>技术合同认定登记</div>
                </div>
                <div class="box-content animate__animated animate__fadeInUp" style="padding: 2rem 1rem;">
                    <div style="display: flex;justify-content: space-between;align-items: center;overflow: hidden;">
                        <button size=small @click.stop="tableSwc(1)" :class="otherIndex == 1 ? 'Btn active' : 'Btn'">登记项数</button>
                        <button size=small @click.stop="tableSwc(2)" :class="otherIndex == 2 ? 'Btn active' : 'Btn'">合同成交额</button>
                        <button size=small @click.stop="tableSwc(3)" :class="otherIndex == 3 ? 'Btn active' : 'Btn'">技术交易额</button>
                    </div>
                    <outcomeLevel :key="outcomeLevelKey" style="padding: 10px;" :data1="dataOne" :data2="dataTow"
                        :data3="dataThree"></outcomeLevel>
                </div>
            </div>
            <div class="myBoxTwo">
                <div class="title-bar animate__animated animate__fadeInUp">
                    <div>成果登记数与技术交易额</div>
                </div>
                <div class="box-content animate__animated animate__fadeInUp" style="padding: 2rem 1rem 0;">
                    <piBarTwo :data="data" :data1="data1" :data2="data2"></piBarTwo>
                </div>
            </div> -->
            <div class="myBoxOne">
                <div class="myBoxOneIn" style="height: 40%;">
                    <div class="title-bar animate__animated animate__fadeInUp">成果转移转化示范基地</div>
                    <div class="box-content animate__animated animate__fadeInUp"
                        @click="gotoPath('/bigScreen/demonstrativelyList', { typeIndex: 10 })">
                        <div class="main-box">
                            <div class="investor-box">
                                <div class="num-li-r2" v-if="organizationNum.length != 0">
                                    <div class="num">
                                        <CountTo :startVal='0'
                                            :endVal='organizationNum'
                                            :separator='false' :duration='2000' />
                                    </div>
                                    <div class="numBgBox">
                                        <div v-for="item in organizationNum.toString()" class="numBg" :key="item">
                                        </div>
                                    </div>
                                </div>
                                <h5>成果转移转化示范基地</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="myBoxOneIn" style="height: 56%;margin-top: 3%;">
                    <div class="title-bar animate__animated animate__fadeInUp">
                        <div>成果转化示范区</div>
                        <!-- <div class="textMoreStyle">查看更多</div> -->
                    </div>
                    <div class="box-content animate__animated animate__fadeInUp" style="height: calc(100% - 5rem);">
                        <div class="demonstration-box">
                            <!-- <div class="demonstration-top">
                            <div class="demonstration-top-item" v-for="(item, index) in organizationList" :key="index">
                                <div :class="'count' + (index%8 + 1)">{{ item.count }}</div>
                                <div class="title" :title="item.industry">{{ item.industry }}</div>
                                <div :class="'drop drop' + (index%8 + 1)"></div>
                            </div>
                        </div>
                        <div class="demonstration-center">
                            <div class="count">{{ sum }}</div>
                            <div class="title">示范区</div>
                        </div> -->
                            <div class="cbbox-b-con">
                                <div class="cbbox-b-conli" v-for="(item, k) in organizationList.slice(0, 2)"
                                    @click="gotoPath('/bigScreen/outcomeLandDetail', { id: item.id })">
                                    <div v-if="k < 4"
                                        style="display: flex;flex-direction: column;justify-content: space-between;">
                                        <h6>
                                            <span>{{ item.name }}</span>
                                        </h6>
                                        <div class="cbbox-b-conli-imgk">
                                            <img v-if="item.imgUrls"
                                                :src="item.imgUrls.indexOf('http') == -1 ? baseUrl + item.imgUrls : item.imgUrls"
                                                alt="">
                                        </div>
                                        <p>所属行业:{{ item.industry }}</p>
                                        <p>地址:{{ item.address }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myBoxTwo" style="margin-top: 2rem;">
                <div class="title-bar animate__animated animate__fadeInUp">
                    <div>科技登记成果完成单位</div>
                    <!-- <div class="textMoreStyle">查看更多</div> -->
                </div>
                <div class="box-content animate__animated animate__fadeInUp">
                    <completionUnit style="padding: 10px;"></completionUnit>
                </div>
            </div>
            <div class="myBoxTwo">
                <div class="title-bar animate__animated animate__fadeInUp">
                    <div @click="otherIndex = 2">经纪人</div>

                    <!-- <div class="textMoreStyle">查看更多</div> -->
                </div>
                <div class="box-content animate__animated animate__fadeInUp" @click="gotoPath('/bigScreen/brokerList')">
                    <div class="main-box">
                        <div class="investor-box">
                            <div class="num-li-r" v-if="agentNum.length != 0">
                                <!-- <div v-for="item in agentNum">{{ item }}</div> -->

                                <div class="num">
                                    <CountTo :startVal='0' :endVal='agentNum'
                                        :separator='false' :duration='2000' />
                                </div>
                                <div class="numBgBox">
                                    <div v-for="item in agentNum.toString()" class="numBg" :key="item">
                                    </div>
                                </div>
                            </div>
                            <h5>经纪人总数量</h5>
                        </div>
                        <div class="echarts-box">
                            <piBar v-if="linexData.length > 0" :xData="linexData" :sData="linesData"></piBar>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myBoxTwo">
                <div class="title-bar animate__animated animate__fadeInUp">
                    <div>服务机构</div>
                    <!-- <div class="textMoreStyle">查看更多</div> -->
                </div>
                <div class="box-content animate__animated animate__fadeInUp"
                    @click="gotoPath('/bigScreen/organizationList')">
                    <div class="main-box">
                        <div class="investor-box">
                            <div class="num-li-r1" v-if="agencyCount.length != 0">
                                <div class="num">
                                    <CountTo :startVal='0' :endVal='agencyCount'
                                        :separator='false' :duration='2000' />
                                </div>
                                <div class="numBgBox">
                                    <div v-for="item in agencyCount.toString()" class="numBg" :key="item">
                                    </div>
                                </div>
                            </div>
                            <h5>机构数量总数</h5>
                        </div>
                        <div class="echarts-box">
                            <piBarThr v-if="linexDataOrg.length > 0" :xData="linexDataOrg" :sData="linesDataOrg"></piBarThr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import applyForPatent from './achievement/applyForPatent.vue'
import completionUnit from './achievement/completionUnit.vue'
import outcomeLevel from './achievement/outcomeLevel.vue'

import { CountTo } from 'vue3-count-to'
import piBar from './achievement/piBar.vue'
import piBarTwo from './achievement/piBarTwo.vue'
import piBarTwoOther from './achievement/piBarTwoOther.vue'
import piBarThr from './achievement/piBarThr.vue'
import { ref, onMounted } from 'vue'
// import { baseUrl } from '../../../../../config';
const baseUrl = 'https://test-mkj-hd-new.huaxun.ink'
// import {
//     getAchievementTransformationData,
//     getAgentData,
//     getAgencyData,
//     getAchievementArea,
//     getAchievementBase,
// } from '../../../../api/screenAchievement.js'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()

const currentIndex = ref(1)

// 吸纳技术成交总额
const absorbTotal = ref(0)
// 登记技术成交总额
const registerTotal = ref(0)
// 科技成果数量
const achievementNum = ref(0)
// 成果需求数量
const demandNum = ref(0)

// 经纪人数量
const agentNum = ref([12])
// 经纪人分布
const linexData = ref([])
const linesData = ref([])
// 服务机构数量
const agencyCount = ref([])
// 服务机构行业分布
const linexDataOrg = ref([])
const linesDataOrg = ref([])
// 各领域数据
const organizationList = ref([])
// 成果转移转化示范区总和
const sum = ref(0)
// 成果转移转化示范基地数量
const organizationNum = ref([])
// 成果转移转化示范基地列表
const baseOrganizationList = ref([])

const xDataAllOne = ref(['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'])
const xDataAllTwo = ref(['呼和浩特市', '包头市', '鄂尔多斯市', '赤峰市', '锡林郭勒盟', '兴安盟', '通辽市', '呼伦贝尔市', '乌海市', '巴彦淖尔市', '阿拉善盟', '乌兰察布市'])
const AllDataOne = ref([821, 1217, 1506, 1534, 1527, 1916])
const AllDataTwo = ref([673, 292, 261, 227, 140, 75, 59, 55, 43, 36, 32, 23])

const dataOne = ref([846, 490, 281, 60, 34])
const dataTow = ref([670, 401, 121, 94, 8])
const dataThree = ref([26.27, 22.19, 132.23, -36.17, 325])

const totalOne = ref([8, 5, 2, 1])
const totalTwo = ref([3, 0, 0, 5])
const totalThree = ref([1, 9, 1, 6])

const changeTab = (index) => {
    currentIndex.value = index
    if(index == 1) {
        AllDataOne.value = [821, 1217, 1506, 1534, 1527, 1916]
        AllDataTwo.value = [673, 292, 261, 227, 140, 75, 59, 55, 43, 36, 32, 23]
        dataOne.value = [846, 490, 281, 60, 34]
        dataTow.value = [670, 401, 121, 94, 8]
        dataThree.value = [26.27, 22.19, 132.23, -36.17, 325]
        totalOne.value = [8, 5,2, 1]
        totalTwo.value = [3, 0, 0, 5]
        totalThree.value = [1, 9, 1, 6]
    }
    if(index == 2) {
        AllDataOne.value = [22.20, 26, 48.20, 46.12, 52.49, 55.17]
        AllDataTwo.value = [123778.11, 193671.28, 71043.74, 35933.82, 19002.92, 6209.28, 14088.84, 5586.49, 52765.1, 9273.48, 5673.66, 14693]
        dataOne.value = [501371.67, 263709.31, 192257.32, 11228.12, 5573.23, 28603.69]
        dataTow.value = [325463.82, 186068.51, 111766.48, 3521.54, 17701.14, 6406.15]
        dataThree.value = [41.73, 72.02, 218.84, -68.51, 346.5]
        // totalOne.value = ['2', '5', '0', '.', '1', '8']
        // totalTwo.value = ['8', '2', '6', '8', '3', '5', '.', '4', '9']
        // totalThree.value = ['5', '5', '7', '1', '9', '.', '7', '2']
    }
    if(index == 3) {
        AllDataOne.value = [13.50, 16.56, 33.46, 32.02, 35.09, 38.21]
        AllDataTwo.value = [93351.34, 152860.57, 63212.27, 26140.04, 8899.45, 3571.88, 11075.36, 4938.57, 4400.41, 7113.12, 1422.06, 5113.76]
        dataOne.value = [347028.51, 175608.31, 129229.16, 10349.61, 5527.73, 26318.69]
        dataTow.value = [248129.86, 129394.2, 94663.5, 3507.91, 16498.24, 4066.15]
        dataThree.value = [35.72, 36.51, 195.04, -66.5, 547.26]
        // totalOne.value = ['1', '6', '8', '.', '8', '4']
        // totalTwo.value = ['5', '9', '5', '1', '5', '8', '.', '3', '7']
        // totalThree.value = ['3', '8', '2', '0', '9', '8', '.', '8', '3']
    }
}

const linexDataOther = ref(['独立科研机构', '大专院校', '企业', '医疗机构', '其他'])
const linesDataOther = ref([233, 684, 723, 296, 126])


const getData = () => {
    // getAchievementTransformationData().then((res) => {
    //     console.log();
    //     if (res.code == 200) {
    //         absorbTotal.value = res.data.absorbTotal || 0
    //         registerTotal.value = res.data.registerTotal || 0
    //         achievementNum.value = res.data.achievementNum || 0
    //         demandNum.value = res.data.demandNum || 0
    //     }
    // })
    absorbTotal.value = 123
    registerTotal.value = 345
    achievementNum.value = 666
    // getAgentData().then((res) => {
    //     if (res.code == 200) {
    //         res.data.agentGroupByOrg.map((v) => {
    //             linexData.value.push(v.areaName)
    //             linesData.value.push(v.count)
    //         })
    //         agentNum.value = res.data.agentNum
    //     }
    // })
    // getAgencyData().then((res) => {
    //     if (res.code == 200) {
    //         res.data.listGroupByCategory.map((v) => {
    //             linexDataOrg.value.push(v.industryCategory)
    //             linesDataOrg.value.push(v.count)
    //         })
    //         agencyCount.value = res.data.agencyCount
    //     }
    // })
    // getAchievementBase().then((res) => {
    //     if (res.code == 200) {
    //         baseOrganizationList.value = res.data.organizationList || []
    //         organizationNum.value = res.data.organizationNum
    //     }
    // })
    // getAchievementArea().then((res) => {
    //     if (res.code == 200) {
    //         // sum.value = res.data.sum || 0
    //         // organizationList.value = res.data.organizationList || []
    //         organizationList.value = res.data || []
    //     }
    // })
}

// const outcomeLevelKey = ref(1)

// const dataOne = ref([846, 490, 281, 60, 34])
// const dataTow = ref([670, 401, 121, 94, 8])
// const dataThree = ref([26.27, 22.19, 132.23, -36.17, 325])

// const otherIndex = ref(1)
// const tableSwc = (value) => {
//     // console.log(123);
//     otherIndex.value = value
//     if (value == 1) {
//         dataOne.value = [846, 490, 281, 60, 34]
//         dataTow.value = [670, 401, 121, 94, 8]
//         dataThree.value = [26.27, 22.19, 132.23, -36.17, 325]
//         outcomeLevelKey.value++
//     }
//     if (value == 2) {
//         dataOne.value = [501371.67, 263709.31, 192257.32, 11228.12, 5573.23, 28603.69]
//         dataTow.value = [325463.82, 186068.51, 111766.48, 3521.54, 17701.14, 6406.15]
//         dataThree.value = [41.73, 72.02, 218.84, -68.51, 346.5]
//         outcomeLevelKey.value++
//     }
//     if (value == 3) {
//         dataOne.value = [347028.51, 175608.31, 129229.16, 10349.61, 5527.73, 26318.69]
//         dataTow.value = [248129.86, 129394.2, 94663.5, 3507.91, 16498.24, 4066.15]
//         dataThree.value = [35.72, 36.51, 195.04, -66.5, 547.26]
//         outcomeLevelKey.value++
//     }
// }

const gotoPath = (path, query) => {
    router.push({
        path: path,
        query: query,
    })
}
onMounted(() => {
    getData()

})
</script>
<style scoped lang="scss">
#box {
    overflow: hidden;
    height: 100%;

    .box-second {
        // flex: 4;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        height: 100%;

        .myBoxOne {
            margin-top: 2rem;
            width: calc((100% - 4.5rem) / 4);
            height: calc((100% - 2rem) / 2);
        }

        .myBoxOneIn {
            width: 100%;
            border: 1px solid rgba(45, 204, 255, 0.13);
        }

        .myBoxTwo {
            width: calc((100% - 4.5rem) / 4);
            height: calc((100% - 2rem) / 2);
            // flex: 1;
            // width: 25%;
            border: 1px solid rgba(45, 204, 255, 0.13);
            // height: 42vh;
            // margin-right: 16px;
            box-sizing: border-box;

            .box-content {
                height: calc(100% - 6.5rem);
                width: 100%;

                .topTotal {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 3rem;

                    .topTotal-item {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;

                        .topTotal-item-title {
                            font-size: 1.3rem;
                            color: #2DCCFF;
                            margin-top: 0.5rem;
                        }

                        .numberBox {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 4rem;
                            margin-top: 1rem;
                            .number {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 3rem;
                                height: 100%;
                                font-size: 3.2rem;
                                border-radius: 0.5rem;
                                text-align: center;
                                font-family: "ffa";
                                background: #052557;
                                margin-left: 0.5rem;
                            }
                        }
                    }
                }

                .newContent {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 100%;

                    .newContent-left {
                        width: 15rem;
                        height: 100%;
                        background: #00183B;
                        border-left: 2px solid #08375C;
                        border-right: 2px solid #08375C;

                        .newContent-left-item {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            width: 100%;
                            height: 33.4%;
                            border-bottom: 2px solid #08375C;
                            border-left: none;
                            color: #01899C;
                            cursor: pointer;

                            .newContent-left-item-img {
                                width: 4.2rem;
                                height: 4.2rem;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .newContent-left-item-text {
                                font-size: 1.6rem;
                                // color: #02FBFD;
                            }
                        }

                        .item-active {
                            background: rgba(2, 251, 253, 0.15);
                            border-left: 3px solid #02FBFD;
                            color: #02FBFD;
                        }
                    }

                    .newContent-right {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: calc(100% - 15rem);
                        height: 100%;

                        .newContent-right-item {
                            width: calc(100% / 3);
                            height: 100%;
                            padding: 0.5rem;

                            .right-item-title {
                                display: flex;
                                justify-content: left;
                                align-items: center;

                                .title-line {
                                    width: 0.3rem;
                                    height: 1.6rem;
                                    background: #02E1E2;
                                }

                                .title-text {
                                    font-size: 1.6rem;
                                    color: #FFFFFF;
                                    margin-left: 0.6rem;
                                }
                            }
                        }
                    }
                }

                .Btn {
                    left: 0px;
                    top: 0px;
                    width: 30%;
                    height: 3.3rem;
                    opacity: 1;
                    background: rgba(2, 251, 253, 0.15);
                    border: 1px solid rgba(2, 251, 253, 0.3);
                    font-family: PingFang SC;
                    font-size: 1.6rem;
                    // color: #02FBFD;
                    color: #028899;
                    cursor: pointer;
                }

                .active {
                    background: rgba(2, 251, 253, 0.15);
                    border: 1px solid rgba(2, 251, 253, 0.3);
                    color: #02FBFD;
                }

                .table-th-box {
                    width: 100%;
                    display: flex;
                    font-size: 1.6rem;
                    font-weight: bold;
                    background: #023164;
                    color: #15e0ff;
                    height: 4.8rem;
                    line-height: 4.8rem;
                    padding: 0 1rem;

                    div {
                        padding: 0 1rem;
                    }
                }

                .policy-box-b {
                    margin-top: 1rem;
                    height: calc(100% - 12rem);
                    overflow-y: scroll;
                    scrollbar-width: none;
                    /* firefox */
                    -ms-overflow-style: none;

                    /* IE 10+ */
                    .demandbox-b-con {
                        .demandbox-b-con-li {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 1.5rem 1rem;
                            font-size: 1.3rem;
                            color: rgba(255, 255, 255, 0.5);

                            .de-li-l {
                                display: flex;
                                align-items: center;
                                color: #fff;
                                width: 50%;
                                padding: 0 1rem;

                                div {
                                    width: 0.6rem;
                                    height: 0.6rem;
                                    background: #037aff;
                                    border-radius: 50%;
                                    margin-right: 0.8rem;
                                }

                                span {
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }

                            .de-li-r {
                                width: 20%;
                                padding: 0 1rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .de-li-e {
                                width: 20%;
                                padding: 0 1rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .de-li-num {
                                width: 10%;

                                div {
                                    width: 1.8rem;
                                    height: 1.6rem;
                                    color: #ff7734;
                                    border: 1px solid #ff7734;
                                    text-align: center;
                                    line-height: 1.6rem;
                                }
                            }
                        }

                        .demandbox-b-con-li:nth-child(odd) {
                            background-color: #0a1f44;
                        }
                    }
                }

                .policy-box-b::-webkit-scrollbar {
                    display: none;
                    /* Chrome Safari */
                }
            }
        }

        .title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 45px;
            line-height: 40px;
            background: url("@/assets/bigScreen/title-bg5.png") no-repeat;
            background-size: 100% 100%;
            background-position: center center;
            // padding: 10px 47px;
            font-family: Source Han Sans CN;
            font-size: 1.8rem;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0px 2.49px 4.67px 0px rgba(0, 80, 203, 0.61);
            padding-left: 47px;
            padding-right: 15px;

            .textMoreStyle {
                font-family: Source Han Sans CN;
                font-size: 12px;
                font-weight: normal;
                line-height: 26px;
                letter-spacing: 0px;
                color: rgba(255, 255, 255, 0.4);
                text-shadow: 0px 2.49px 4.67px 0px rgba(0, 80, 203, 0.61);
                cursor: pointer;
            }
        }

        .title-barOther {
            background: url("@/assets/bigScreen/title-bg2.png") no-repeat;
            background-size: 100% 100%;
            background-position: center center;
            padding-left: 65px;
        }

        .myBoxTwo:nth-child(n + 5) {
            margin-top: 2rem;
        }
    }
}

.overall {
    display: flex;
    flex-flow: wrap;
    padding: 2rem 2rem 0;
    justify-content: space-between;

    @keyframes breathing {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
        }
    }

    .policy-box-t {
        border-radius: 0.6rem;
        background: #00183b;
        border: 0.1rem solid rgba(45, 205, 255, 0.17);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        padding: 1rem 0;
        height: 14rem;
        margin-bottom: 2rem;
        width: 46%;
        animation: breathing 3s ease-in-out infinite;

        h5 {
            font-size: 2.8rem;
            line-height: 2.6rem;
            color: #257cff;
        }

        img {
            width: 12rem;
            height: 6.8rem;
            margin: -4.2rem auto 0;
        }

        div {
            font-size: 1.4rem;
            font-weight: normal;
            line-height: 2.6rem;
            color: #2dccff;
        }
    }
}

.ct-numk {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .ct-numk-t {
        padding: 1rem 2rem;

        h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
        }

        .ct-numk-con {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ctnumk-li {
                background-image: url("@/assets/bigScreen/ctnum-bgimg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 18rem;
                height: 10rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .ctnum {
                    display: flex;
                    justify-content: center;
                    color: #ffdd03;
                    font-weight: bold;

                    div {
                        font-size: 3rem;
                        // font-weight: normal;
                        background-image: url("@/assets/bigScreen/ctnum-bg1.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        line-height: 3.2rem;
                        letter-spacing: 0;
                        width: 2.4rem;
                        height: 3.7rem;
                        line-height: 3.7rem;
                        text-align: center;
                        margin: 0 0.05rem;
                    }
                }

                .cttit {
                    font-size: 1.2rem;
                    font-weight: normal;
                    line-height: 1.7rem;
                    text-align: center;
                    letter-spacing: 0;
                    background: linear-gradient(to bottom,
                            #00c8ff 0%,
                            #0066ff 100%);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }

            .ctnumk-li:nth-child(2) {
                margin: 0 1.3rem;
            }
        }
    }
}

.ct-numk1 {
    // height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .ct-numk-t {
        padding: 1rem 2rem;

        h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
        }

        .ct-numk-con {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .ctnumk-li {
                background-image: url("@/assets/bigScreen/ctnum-bgimg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 18rem;
                height: 10rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .ctnum {
                    display: flex;
                    justify-content: center;
                    color: #89ff3b;
                    font-weight: bold;
                    // background-image: url('../../../../assets/bigScreen/contract-bg.png');
                    background-size: 100% 100%;
                    width: 12.6rem;
                    margin: 0 auto;
                    background-repeat: no-repeat;

                    div {
                        font-size: 3rem;
                        // font-weight: normal;
                        line-height: 3.2rem;
                        letter-spacing: 0;
                        width: 2.4rem;
                        height: 3.7rem;
                        line-height: 3.7rem;
                        text-align: center;
                        margin: 0 0.05rem;
                        background-image: url("@/assets/bigScreen/ctnum-bg1.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }

                .cttit {
                    font-size: 1.2rem;
                    font-weight: normal;
                    line-height: 1.7rem;
                    text-align: center;
                    letter-spacing: 0;
                    background: linear-gradient(to bottom,
                            #00c8ff 0%,
                            #0066ff 100%);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
        }
    }

    .ct-numk-t-all {
        width: 100%;

        .ctnumk-li {
            width: 100% !important;
        }
    }
}

.main-box {
    height: calc(100% - 4.5rem);

    .echarts-box {
        height: calc(100% - 5rem);
    }

    .investor-box {
        height: 11rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        padding: 1rem 0 0;

        .num-li-r {
            display: flex;
            justify-content: center;
            align-items: center;

            .num {
                // background-image: url("../../../../assets/bigScreen/num-bg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                color: #ffdd03;
                font-size: 3.2rem;
                height: 5.5rem;
                line-height: 5.5rem;
                border-radius: 0.5rem;
                text-align: center;
                font-family: "ffa";
                margin: 0 0.2rem;
                z-index: 10;
                letter-spacing: 2.8rem;
                padding-left: 3rem;
            }

            .numBgBox {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
            }

            .numBg {
                background-image: url("@/assets/bigScreen/num-bg.png");
                background: #052557;
                border: 0.1rem solid rgba(45, 204, 255, 0.25);
                box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                width: 3.7rem;
                height: 5.5rem;
                line-height: 5.5rem;
                margin: 0 0.2rem;
                z-index: 0;
                border-radius: 0.5rem;
            }
        }

        .num-li-r1 {
            display: flex;
            justify-content: center;
            align-items: center;

            .num {
                // background-image: url("../../../../assets/bigScreen/num-bg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                color: #228aff;
                font-size: 3.2rem;
                height: 5.5rem;
                line-height: 5.5rem;
                border-radius: 0.5rem;
                text-align: center;
                font-family: "ffa";
                margin: 0 0.2rem;
                z-index: 10;
                letter-spacing: 2.8rem;
                padding-left: 3rem;
            }

            .numBgBox {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
            }

            .numBg {
                background-image: url("@/assets/bigScreen/num-bg.png");
                background: #052557;
                border: 0.1rem solid rgba(45, 204, 255, 0.25);
                box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                width: 3.7rem;
                height: 5.5rem;
                line-height: 5.5rem;
                margin: 0 0.2rem;
                z-index: 0;
                border-radius: 0.5rem;
            }
        }

        .num-li-r2 {
            display: flex;
            justify-content: center;
            align-items: center;

            .num {
                // background-image: url("../../../../assets/bigScreen/num-bg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                color: #06ffb8;
                font-size: 3.2rem;
                height: 5.5rem;
                line-height: 5.5rem;
                border-radius: 0.5rem;
                text-align: center;
                font-family: "ffa";
                margin: 0 0.2rem;
                z-index: 10;
                letter-spacing: 2.8rem;
                padding-left: 3rem;
            }

            .numBgBox {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
            }

            .numBg {
                background-image: url("@/assets/bigScreen/num-bg.png");
                background: #052557;
                border: 0.1rem solid rgba(45, 204, 255, 0.25);
                box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                width: 3.7rem;
                height: 5.5rem;
                line-height: 5.5rem;
                margin: 0 0.2rem;
                z-index: 0;
                border-radius: 0.5rem;
            }
        }

        h5 {
            font-size: 1.3rem;
            color: #2dccff;
            font-weight: normal;
        }
    }
}

.table-box {
    height: 100%;
}

.demonstration-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 2rem;
    box-sizing: border-box;

    .demonstration-top {
        width: 100%;
        height: 9.5rem;
        padding: 0.5rem 3rem;
        background: url("@/assets/bigScreen/achievement6.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;

        .demonstration-top-item {
            text-align: center;
            font-size: 2.2rem;
            font-weight: bold;
            width: 100%;

            .title {
                font-size: 1.2rem;
                line-height: 16px;
                color: rgba(255, 255, 255, 0.7);
                margin: 0.8rem 0 1.5rem;
                max-width: 5rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            .drop {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
                margin: 0 auto;
            }

            .count1 {
                color: #00d1c8;
            }

            .drop1 {
                background: #00d1c8;
            }

            .count2 {
                color: #23be72;
            }

            .drop2 {
                background: #23be72;
            }

            .count3 {
                color: #f9da4f;
            }

            .drop3 {
                background: #f9da4f;
            }

            .count4 {
                color: #7d5afb;
            }

            .drop4 {
                background: #7d5afb;
            }

            .count5 {
                color: #bf6d6d;
            }

            .drop5 {
                background: #bf6d6d;
            }

            .count6 {
                color: #35921c;
            }

            .drop6 {
                background: #35921c;
            }

            .count7 {
                color: #721c92;
            }

            .drop7 {
                background: #721c92;
            }

            .count8 {
                color: #1c2492;
            }

            .drop8 {
                background: #1c2492;
            }
        }
    }

    .demonstration-center {
        width: 20rem;
        height: 20rem;
        padding-top: 7rem;
        margin: 0.7rem auto;
        background: url("@/assets/bigScreen/achievement5.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        .count {
            font-size: 2.6rem;
            font-weight: bold;
            line-height: 3.6rem;
            color: #66ffff;
            margin: 0 auto;
        }

        .title {
            font-size: 1.6rem;
            line-height: 1.9rem;
            color: #ffffff;
        }
    }
}

.cbbox-b-con {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

    .cbbox-b-conli {
        width: calc((100% - 4rem) / 2);

        // max-height: 50%;
        h6 {
            display: flex;
            align-items: center;
            margin: 0;

            img {
                width: 2.1rem;
                height: 2.1rem;
            }

            span {
                font-size: 1.4rem;
                font-weight: normal;
                letter-spacing: 0;
                color: #00e6ff;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .cbbox-b-conli-imgk {
            margin-top: 0.5rem;
            height: 6rem;

            img {
                width: 100%;
                height: 100%;
            }
        }

        p {
            font-size: 1.2rem;
            font-weight: normal;
            letter-spacing: 0;
            color: rgba(255, 255, 255, 0.54);
            margin-top: 0.4rem;
            margin-bottom: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

</style>
